<template>
  <div class="box">
    <h3>教师列表</h3>
    <div id="teacherChart" style="width: 500px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      charts: "",
      opinion: [],
      opinionData: [],
      arr: []
    };
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.opinionData
          }
        ]
      });
    },
    getClasses() {
      this.$api.teacherApi.getTeacher().then(({ data }) => {

        let arr = data.data.rows
        // console.log(arr);

        arr.forEach(v => {
          this.opinion.push(v.name)
          this.opinionData.push({ value: 1, name: v.name })
        });
        this.drawPie("teacherChart");
      })

    }
  },
  created() {
    this.getClasses();
  }
};
</script>

<style scoped>
.box {
  background-color: #fff;
  padding: 10px;
  width: 570px;
  /* height: 400px; */
}
</style>